<template>
  <div>
    <BasicTable @register="registerTable" class="!p-0">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'carbon:task-view',
              label: '记录明细',
              type: 'primary',
              onClick: handleView.bind(null, record),
            },
            {
              icon: 'clarity:export-line',
              label: '导出失败数据',
              type: 'primary',
              onClick: exportFailureData.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
import { useTable, TableAction, BasicTable } from '/@/components/Table'
import { columnsImport, formSchemasImport } from './data'
import { exportFail, importLines } from '/@/api/queryScore'
import { useRouter } from 'vue-router'
import { downloadByUrl } from '/@/utils/file/download'

const router = useRouter()

const [registerTable, {}] = useTable({
  rowKey: 'autoId',
  columns: columnsImport(),
  showIndexColumn: false,
  api: importLines,
  formConfig: {
    labelWidth: 80,
    schemas: formSchemasImport(),
    autoSubmitOnEnter: true,
    actionColOptions: { span: 4 },
  },
  useSearchForm: true,
  bordered: true,
  actionColumn: {
    title: '操作',
    width: 260,
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: 'right',
  },
})

function handleView({ importAutoId, wjmc }) {
  router.push({ path: '/sfLines', query: { fileName: wjmc, importAutoId } })
}

function exportFailureData({ importAutoId, wjmc }) {
  exportFail({ importAutoId }).then(res => {
    const url = window.URL.createObjectURL(res)

    downloadByUrl({
      url,
      fileName: wjmc,
    })
  })
}
</script>
